<!DOCTYPE html>
<html>
  <head>
    <title>index</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/index/styles.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/index/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (Rectangle) -->
      <div id="u0" class="ax_default box_1">
        <div id="u0_div" class=""></div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u1" hidden="true" class="ax_default" data-left="1234" data-top="197" data-width="208" data-height="110">

        <!-- Unnamed (Shape) 
        <div id="u2" class="ax_default icon">
          <img id="u2_img" class="img " src="images/index/u2.png"/>
        </div>-->

        <!-- minutes (Text Field) -->
        <div id="u3" class="ax_default text_field" data-label="minutes" >
          <input id="u3_input" type="text" value="30"/>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u4" class="ax_default" data-left="265" data-top="345" data-width="266" data-height="78">

        <!-- Unnamed (Rectangle) -->
        <div id="u5" class="ax_default box_1">
          <div id="u5_div" class=""></div>
        </div>

        <!-- MM (Rectangle) -->
        <div id="u6" class="ax_default shape" data-label="MM">
          <div id="u6_div" class=""></div>
        </div>

        <!-- minutes (Text Field) -->
        <div id="u7" class="ax_default text_field" data-label="minutes">
          <input id="u7_input" type="text" value="2"/>
        </div>

        <!-- addM (Rectangle) -->
        <div id="u8" class="ax_default shape" data-label="addM">
          <div id="u8_div" class=""></div>
          <div id="u8_text" class="text ">
            <p><span>+</span></p>
          </div>
        </div>

        <!-- minusM (Rectangle) -->
        <div id="u9" class="ax_default shape disabled" data-label="minusM">
          <div id="u9_div" class="disabled"></div>
          <div id="u9_text" class="text ">
            <p><span>-</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u10" class="ax_default" data-left="717" data-top="345" data-width="266" data-height="78">

        <!-- MM (Rectangle) -->
        <div id="u11" class="ax_default shape" data-label="MM">
          <div id="u11_div" class=""></div>
        </div>

        <!-- SS (Rectangle) -->
        <div id="u12" class="ax_default shape" data-label="SS">
          <div id="u12_div" class=""></div>
        </div>

        <!-- seconds (Text Field) -->
        <div id="u13" class="ax_default text_field" data-label="seconds">
          <input id="u13_input" type="text" value="0"/>
        </div>

        <!-- addS (Rectangle) -->
        <div id="u14" class="ax_default shape" data-label="addS">
          <div id="u14_div" class=""></div>
          <div id="u14_text" class="text ">
            <p><span>+</span></p>
          </div>
        </div>

        <!-- minusS (Rectangle) -->
        <div id="u15" class="ax_default shape disabled" data-label="minusS">
          <div id="u15_div" class="disabled"></div>
          <div id="u15_text" class="text ">
            <p><span>-</span></p>
          </div>
        </div>
      </div>

      <!-- M (Rectangle) -->
      <div id="u16" class="ax_default heading_2" data-label="M">
        <div id="u16_div" class=""></div>
        <div id="u16_text" class="text ">
          <p><span>分钟</span></p>
        </div>
      </div>

      <!-- S (Rectangle) -->
      <div id="u17" class="ax_default heading_2" data-label="S" >
        <div id="u17_div" class=""></div>
        <div id="u17_text" style="cursor:pointer" class="text " onclick="setCountTime()">
          <span>秒钟</span>
        </div>
      </div>

      <!-- ok (Rectangle) -->
      <button id="u18" class="ax_default shape" data-label="ok" onclick="start()" ondblclick="myrefresh()">
        <div id="u18_div" class=""></div>
        <div id="u18_text" class="text ">
          <p id="timerText" style="z-index:1"><span>开始计时</span></p>
        </div>
      </button>


      <!-- minutes (Text Field) -->
      <div id="u19" class="ax_default text_field" data-label="minutes">
        <input id="u19_input" type="text" value="在此处输入标题..."/>
      </div>
    </div>
    <embed name="embedPlay" src="./notify.mp3" autostart="true" hidden="true" loop="false"></embed>
    <audio id='audioPlay' src='./notify.wav' hidden='true'>
    
<script src="jquery-1.js"></script>
<script>

	var tarMin = 5;
	var tarSec = 0;
	var timer;
	var countTime=30;

        window.onload=function(){

            document.getElementById("u8").click();
            document.getElementById("u7_input").value = 3;

            document.getElementById("u9").disable=false;
            document.getElementById("u15").disable=false;

		    document.getElementById("u13_input").value = 0;
        }
    function myrefresh()
		{
		   document.getElementById("u8").click();
            document.getElementById("u7_input").value = 3;

            document.getElementById("u9").disable=false;
            document.getElementById("u15").disable=false;

		    document.getElementById("u13_input").value = 0;
		    clearInterval(timer);
            document.getElementById("u1").hidden=true;
		    document.getElementById("timerText").textContent = "开始计时";
		}
		function setTime(){

				var nowMin = document.getElementById("u7_input").value;
				var nowSec = document.getElementById("u13_input").value;
				console.log(nowMin)
				console.log(nowSec)
				document.getElementById("u7_input").innerHTML = nowMin;
				document.getElementById("u13_input").innerHTML = nowSec;
				document.getElementById("title").innerHTML = document.getElementById("setTitle").value;

				$("#head").hide();


		}
		function setCountTime(){
			var time = prompt("请输入提醒时间:","30");
			if (!(/(^[1-9]\d*$)/.test(time)) || time<0 || time >60) {
　　　　　　alert('输入数字格式错误，请重新输入');
　　　　　　return;
　　　}
			countTime = time;


		}
		function start(){


			 var info =  document.getElementById("timerText").textContent;
			 console.log(info);
			 if(info == "暂停计时"){

			 		breakTime();
			 		document.getElementById("timerText").textContent = "开始计时";
			 	}else{
			 		timer = setInterval(changTime, 1000);
			 		document.getElementById("timerText").textContent = "暂停计时";
			 	}

			}

			function breakTime(){
				clearInterval(timer);
			}

		function changTime(){
			//console.log(countTime);
					var nowMin = document.getElementById("u7_input").value;
					var nowSec = document.getElementById("u13_input").value;

					if(nowSec-1 == countTime && nowMin == 0){
						document.getElementById("u1").hidden=false;
						playSound();
					}

					if(nowSec == 0){
						if(nowMin == 0){
							clearInterval(timer);
							playSound();
                            document.getElementById("timerText").textContent = "开始计时";
						}
						else{
							document.getElementById("u13_input").value = 59;
							document.getElementById("u3_input").value = 59;
							document.getElementById("u7_input").value = nowMin -1;
						}
					}
					else{
						document.getElementById("u13_input").value = nowSec-1;
						document.getElementById("u3_input").value = nowSec-1;
					}

		}



function playSound()
    {
    	console.log("开始播放");
      var borswer = window.navigator.userAgent.toLowerCase();
      console.log(borswer)

      if ( IEVersion() != -1 )
      {
      	console.log("this is ie rubbish");
        //IE内核浏览器
        var strEmbed = '<embed name="embedPlay" src="./notify.mp3" autostart="true" hidden="true" loop="false"></embed>';
        //if ( $( "body" ).find( "embed" ).length <= 0)
          //$( "body" ).append( strEmbed );
          
        var embed = document.embedPlay;

        //浏览器不支持 audion，则使用 embed 播放
        embed.volume = 100;
        //embed.play();这个不需要

				
      } else
      {
      	console.log("this is no-ie ");
        //非IE内核浏览器
        var strAudio = "<audio id='audioPlay' src='./notify.mp3' hidden='true'>";
        if ( $( "body" ).find( "audio" ).length <= 0 )
          $( "body" ).append( strAudio );
        var audio = document.getElementById( "audioPlay" );

        //浏览器支持 audion
        audio.play();
      }
      console.log("播放结束");
    }
    function IEVersion() {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
            var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
            var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
            var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
            if(isIE) {
                var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                if(fIEVersion == 7) {
                    return 7;
                } else if(fIEVersion == 8) {
                    return 8;
                } else if(fIEVersion == 9) {
                    return 9;
                } else if(fIEVersion == 10) {
                    return 10;
                } else {
                    return 6;//IE版本<=7
                }   
            } else if(isEdge) {
                return 'edge';//edge
            } else if(isIE11) {
                return 11; //IE11  
            }else{
                return -1;//不是ie浏览器
            }
        }

</script>
  </body>
</html>
